<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>扫码签收</title>
  <link rel="stylesheet" href="__STATIC__/index/layui/css/layui.css">
</head>
<style type="text/css">
 .content{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: url(__IMG__/scanbg.png) no-repeat #fff;
 } 
</style>
<body class="content row">
    <div class="layui-col-xs6" style="margin-top: 250px">
        <div class="layui-tab" style="background-color: #fff;">
          <ul class="layui-tab-title">
            <li class="layui-this" lay-filter="test1">扫码枪（签收）</li>
            <li lay-filter="test2">手动输入</li>
          </ul>

          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                  <img src="__IMG__/loading.gif" style="width: 100%;height: 40px;">
				  <input type="hidden" autocomplete="off" id="sn">
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                  <div class="row">
                    <div class="layui-col-xs9">
                      <input type="text" name="manual_sn" autocomplete="off" placeholder="请输入物流单号" class="layui-input">
                    </div>
                    <div class="layui-col-xs3">
                      <button class="layui-btn" id="sdSign">默认按钮</button>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
    </div>
    
</body>
<script src="__STATIC__/admin/js/jquery.min.js" charset="utf-8"></script>
<script src="__STATIC__/index/layui/layui.js" charset="utf-8"></script>
<script>
	layui.use(['layer', 'jquery'], function(){
		var layer = layui.layer
	  , $ = layui.jquery;
	  
		  window.onload = function(e){
			var code = "";
			var lastTime,nextTime;
			var lastCode,nextCode;

			document.onkeypress = function(e) {
				nextCode = e.which;
				nextTime = new Date().getTime();

				if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
					code += String.fromCharCode(lastCode); 
				} else if(lastCode != null && lastTime != null && nextTime - lastTime > 100){
					code = "";
				}

				lastCode = nextCode;
				lastTime = nextTime;
			}

			this.onkeypress = function(e){
				if(e.which == 13){
					sendSign(code)
					console.log(code);
					code = "";
				}
			} 
		}
		
		$('#sdSign').on('click',function(){
			sendSign($('input[name=manual_sn]').val());
		});
			
	
		function sendSign(code){
			$.post('{:url("admin/pack/scan")}', {code:code}, function(data, textStatus, xhr) { 
				if (data.code==1) {
					$('body').append('<embed src="__STATIC__/admin/video/sign_ok.mp3" autostart="true" hidden="true" loop="false">');
					layer.msg(data.msg);
				}else{
					$('body').append('<embed src="__STATIC__/admin/video/sign_no.mp3" autostart="true" hidden="true" loop="false">');
					layer.msg(data.msg,{time:5000});
				}
			},'json');
		}



		$('.layui-tab-title').on('click','li',function(){
		  var cval = $(this).attr('lay-filter');
		  if(cval=='test1'){
			$(this).addClass('layui-this');
			$(this).siblings().removeClass('layui-this');
			$('.layui-tab-item:eq(0)').addClass('layui-show');
			$('.layui-tab-item:eq(1)').removeClass('layui-show');
			
		  }
		  if(cval=='test2'){
			
			$(this).siblings().removeClass('layui-this');
			$(this).addClass('layui-this');
			$('.layui-tab-item:eq(1)').addClass('layui-show');
			$('.layui-tab-item:eq(0)').removeClass('layui-show');
			
		  }
	  
		});
	  
	});
	
	
	



</script>
</html>